<!--
 * @description: 
 * @Date: 2022-10-25 22:09:15
 * @LastEditTime: 2022-11-09 19:18:41
-->
<template>
  <div class="addiconframe flex">
    <div class="left">
      <div class="titleTop flex pl-5 items-center">
        <span class="text-2xl">添加图标</span>
      </div>
      <div class="add-body space-y-3 pl-3 pr-3">
        <div
          class="add-type"
          :class="{ selectCom: com == onlineMallVue }"
          @click="sel(onlineMallVue)"
        >
          <img src="@/assets/svg/appstore.svg" />
          <span>标签商城</span>
        </div>
        <div
          class="add-type"
          :class="{ selectCom: com == componentVue }"
          @click="sel(componentVue)"
        >
          <img src="@/assets/svg/appstore.svg" />
          <span>系统应用</span>
        </div>
        <div
          class="add-type"
          :class="{ selectCom: com == customVue }"
          @click="sel(customVue)"
        >
          <img src="@/assets/svg/custom.svg" />
          <span>自定义标签</span>
        </div>
      </div>
    </div>
    <div class="right">
      <component :is="com" :data="data"></component>
    </div>
  </div>
</template>
<script setup>
import { defineAsyncComponent, ref, shallowRef, defineProps } from "vue";
const customVue = defineAsyncComponent(() => import("./custom.vue"));
const onlineMallVue = defineAsyncComponent(() => import("./onlineMall.vue"));
const componentVue = defineAsyncComponent(() => import("./component.vue"));
const com = shallowRef(onlineMallVue);
const data = ref({});
const prop = defineProps({
  data: {
    type: Object,
  },
});
const sel = (item) => {
  com.value = item;
};
if (prop.data?.id) {
  data.value = prop.data;
  sel(customVue);
}
</script>
<style lang="less">
@left: 170px;

.selectCom {
  background-color: rgb(255, 255, 255);
}

.addiconframe {
  height: 100%;
  width: 100%;

  > .left {
    width: @left;
    height: calc(100% + 28px);
    transform: translateY(-28px);
    background-color: #f5f5f5;

    .titleTop {
      height: 80px;
    }

    > .add-body {
      > .add-type {
        cursor: pointer;
        display: flex;
        align-items: center;
        border-radius: 5px;
        padding: 10px;
        font-size: 15px;
        width: 100%;

        &:hover {
          background-color: rgb(255, 255, 255);
        }

        > img {
          width: 22px;
          height: 22px;
        }

        > span {
          margin-left: 5px;
        }
      }
    }
  }

  > .right {
    width: calc(100% - @left);
    padding: 0px 15px;
  }
}
</style>
